<template>
	<pro-table
		ref="protable"
		rowKey="dictId"
		:loadDataUrl="api.getList"
		:columns="columns"
		:isAdd="$_has('sys:dict:insert')"
		:isDelete="$_has('sys:dict:delete')"
		@selectedRowChange="onSelectChange"
		@addRecord="addRecord"
		@showDeleteConfirm="showDeleteConfirm"
	>
		<span class="tag" :class="{ active: text == 1 }" slot="status" slot-scope="{ text }">{{ text | fitlerStatus }}</span>
		<span slot="operation" slot-scope="{ text, record }" class="operation">
			<a href="javascript:;" v-has="'sys:item:list'" title="查看" class="edit" @click="showDetails(record)">查看</a>
			<a href="javascript:;" v-has="'sys:dict:update'" title="编辑" class="edit" @click="editRecord(record)">编辑</a>
			<a href="javascript:;" v-has="'sys:dict:delete'" title="删除" class="del" @click="showDeleteConfirm(1, record.dictId)">删除</a>
		</span>
		<!-- 添加，编辑 -->
		<add-or-edit-dict-modal editKey="dictId" :api="api" modalTitle="数据字典" ref="addOrEditModal" @ok="handlerRefresh"></add-or-edit-dict-modal>
		<!--打开字典数据项-->
		<dict-drawer datalist=".datalist" ref="dictDrawer"></dict-drawer>
	</pro-table>
</template>

<script>
import { rowSelection, recordOperation } from '@/mixins';
import { sysManageapi } from '@/api/index.js';
import addOrEditDictModal from './module/addOrEditDictModal';
import dictDrawer from './module/dictDrawer/index';
import { STATUSENUM } from '@/utils/enumeration';
const columns = [
	{
		title: '字典名称',
		dataIndex: 'dictName',
		key: 'dictName',
		searchInfo: {
			type: 'string',
			defaultValue: ''
		},
		ellipsis: true
	},
	{
		title: '字典编码',
		dataIndex: 'dictCode',
		key: 'dictCode',
		searchInfo: {
			type: 'string',
			defaultValue: ''
		},
		ellipsis: true
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		scopedSlots: {
			customRender: 'status'
		},
		searchInfo: {
			type: 'select',
			defaultValue: undefined,
			optionlist: [
				{
					value: 0,
					text: '启用'
				},
				{
					value: 1,
					text: '停用'
				}
			]
		}
	},
	{
		title: '字典描述',
		dataIndex: 'description',
		key: 'description',
		ellipsis: true
	},

	{
		title: '操作',
		key: 'operation',
		dataIndex: 'operation',
		scopedSlots: { customRender: 'operation' },
		width: 160,
		fixed: 'right'
	}
];
export default {
	name: 'dictlist',
	mixins: [rowSelection, recordOperation],
	components: {
		addOrEditDictModal,
		dictDrawer
	},
	data() {
		return {
			columns: columns,
			api: sysManageapi.dictUrl
		};
	},
	methods: {
		/* 详情 */
		showDetails(record) {
			this.$refs.dictDrawer.show(record);
		}
	},
	filters: {
		fitlerStatus(val) {
			return STATUSENUM[val];
		}
	}
};
</script>
<style scoped lang="less">
.datalist {
	padding-left: 0;
}

.datahtml {
	padding-left: 20px;
}
</style>
